.color-picker__popover.ant-popover-placement-bottom,
.color-picker__popover.ant-popover-placement-bottomLeft,
.color-picker__popover.ant-popover-placement-bottomRight {
  padding-top: 0;
}

.color-picker__popover.ant-popover-placement-top,
.color-picker__popover.ant-popover-placement-topLeft,
.color-picker__popover.ant-popover-placement-topRight {
  padding-bottom: 0;
}

.color-picker__popover .ant-popover-arrow {
  display: none;
}

.color-picker__popover .ant-popover-inner-content {
  padding: 8px;
}

.color-hue-slider {
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 280px;
  height: 12px;
  background-color: red;
  padding: 0 2px;
  margin-bottom: 8px;
}
.color-hue-slider__bar {
  position: relative;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(red),
    color-stop(17%, #ff0),
    color-stop(33%, #0f0),
    color-stop(50%, #0ff),
    color-stop(67%, #00f),
    color-stop(83%, #f0f),
    to(red)
  );
  background: linear-gradient(
    to right,
    red 0,
    #ff0 17%,
    #0f0 33%,
    #0ff 50%,
    #00f 67%,
    #f0f 83%,
    red 100%
  );
  height: 100%;
}
.color-hue-slider__thumb {
  position: absolute;
  cursor: pointer;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  border-radius: 1px;
  background: #fff;
  border: 1px solid #f0f0f0;
  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
  z-index: 1;
}
.color-hue-slider.is-vertical {
  width: 12px;
  height: 180px;
  padding: 2px 0;
  margin-left: 8px;
}
.color-hue-slider.is-vertical .color-hue-slider__bar {
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(red),
    color-stop(17%, #ff0),
    color-stop(33%, #0f0),
    color-stop(50%, #0ff),
    color-stop(67%, #00f),
    color-stop(83%, #f0f),
    to(red)
  );
  background: linear-gradient(
    to bottom,
    red 0,
    #ff0 17%,
    #0f0 33%,
    #0ff 50%,
    #00f 67%,
    #f0f 83%,
    red 100%
  );
}
.color-hue-slider.is-vertical .color-hue-slider__thumb {
  left: 0;
  top: 0;
  width: 100%;
  height: 4px;
}

.color-svpanel {
  position: relative;
  width: 280px;
  height: 180px;
  margin-bottom: 8px;
}
.color-svpanel__black,
.color-svpanel__white {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.color-svpanel__white {
  background: -webkit-gradient(linear, left top, right top, from(#fff), to(rgba(255, 255, 255, 0)));
  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}
.color-svpanel__black {
  background: -webkit-gradient(linear, left bottom, left top, from(#000), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
}
.color-svpanel__cursor {
  position: absolute;
}
.color-svpanel__cursor > div {
  cursor: head;
  width: 4px;
  height: 4px;
  -webkit-box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0, 0, 0, 0.3),
    0 0 1px 2px rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0, 0, 0, 0.3), 0 0 1px 2px rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  -webkit-transform: translate(-2px, -2px);
  transform: translate(-2px, -2px);
}

.color-alpha-slider {
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 280px;
  height: 12px;
  margin-bottom: 8px;
  background: url();
}
.color-alpha-slider__bar {
  position: relative;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(rgba(255, 255, 255, 0)),
    to(white)
  );
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, #fff 100%);
  height: 100%;
}
.color-alpha-slider__thumb {
  position: absolute;
  cursor: pointer;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  border-radius: 1px;
  background: #fff;
  border: 1px solid #f0f0f0;
  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
  z-index: 1;
}
.color-alpha-slider.is-vertical {
  width: 20px;
  height: 180px;
  margin-left: 8px;
}
.color-alpha-slider.is-vertical .color-alpha-slider__bar {
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(rgba(255, 255, 255, 0)),
    to(white)
  );
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #fff 100%);
}
.color-alpha-slider.is-vertical .color-alpha-slider__thumb {
  left: 0;
  top: 0;
  width: 100%;
  height: 4px;
}

.color__value {
  display: flex;
}

.color__value .ant-input-sm {
  font-size: 12px;
}

.color__preview {
  width: 32px;
  height: 24px;
  border-radius: 2px;
  margin-left: 8px;
  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);
}

.color__picker {
  display: inline-block;
  width: 24px;
  height: 16px;
  border: 1px solid #dfe2e6;
  border-radius: 2px;
  cursor: pointer;
}
